<template>
  <div class="portal__editor">
    <div class="a-card is-always-shadow">
      <h4>组件区</h4>
      <WidgetArea></WidgetArea>
    </div>
    <div class="portal__box">
      <h4>布局</h4>
      <div>
        <div class="center">
          <a-button @click="addRow([8, 8, 8])">新增 8:8:8</a-button>
          <a-button @click="addRow()">新增 6:6:6:6</a-button>
          <a-button @click="preview()">预览</a-button>
        </div>
        <a-row :gutter="10" v-for="(row, rowIndex) in rows" :key="rowIndex">
          <a-col v-for="(zone, zoneIndex) in row.zones" :key="zoneIndex" :md="zone.size" style="border:1px dotted #ddd;min-height:88px;">
            <!-- 拖拽盒子 -->
            <draggable v-model="zone.widgets" :options="{ group: 'ronli' }" @start="drag = true" @end="drag = false">
              <!-- 拖拽主键 -->
              <div v-for="(item, index) in zone.widgets" :key="index">
                <div @mouseover="showBth = true" @mouseleave="showBth = false" class="moveBtnBox">
                  <a-button class="moveBtn" type="danger" icon="delete" shape="circle" @click="deleteThis(rowIndex, zoneIndex, index)" v-show="showBth"></a-button>
                  <component :is="item.name"></component>
                </div>
              </div>
              <div class="cursor--forbid" v-if="!zone.widgets.length" @start="drag = false" @end="drag = false" style="padding:1em 0;"></div>
            </draggable>
          </a-col>
          <!-- 行删除btn -->
          <a-button type="danger" icon="delete" circle title="删除该行" @click="deleteRow(rowIndex)" style="position:absolute; left:-10px; top:10px;"></a-button>
        </a-row>
      </div>
    </div>
    <transition name="fade">
      <ProtalPreview v-if="isPreview" :contents="rows" @previewclose="preview"></ProtalPreview>
    </transition>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import WidgetArea from './WidgetArea.vue'
import ProtalPreview from './PortalPreview.vue'

import ayay from './widgets/index.js'

export default {
  name: 'sb',
  props: {
    msg: String,
  },
  components: {
    draggable,
    WidgetArea,
    ProtalPreview,
    ...ayay.components,
  },

  methods: {
    addRow(cols = [6, 6, 6, 6]) {
      const newRow = {
        zones: [],
      }
      cols.forEach((colsize) => {
        newRow.zones.push({
          size: colsize,
          widgets: [],
        })
      })
      this.rows.push(newRow)
    },
    preview(vbool) {
      this.isPreview = vbool === null || vbool === undefined ? !this.isPreview : !!vbool
    },
    deleteRow(rowindex) {
      this.rows.splice(rowindex, 1)
    },
    deleteThis(rowIndex, zoneIndex, id) {
      this.rows[rowIndex].zones[zoneIndex].widgets.splice(id, 1)
    },
  },
  data() {
    return {
      isPreview: false,
      showBth: false,
      rows: [
        {
          zones: [
            {
              size: 8,
              widgets: [],
            },
            {
              size: 8,
              widgets: [],
            },
            {
              size: 8,
              widgets: [],
            },
          ],
        },
      ],
    }
  },
}
</script>
<style lang="scss" scoped>
.portal__editor {
  display: flex;
}

.portal__box {
  width: calc(100% - 180px);
}
.a-card.is-always-shadow {
  width: 180px;
}
.cursor--forbid {
  cursor: not-allowed !important;
}
.cursor--move {
  cursor: move !important;
}
p.cursor--move {
  margin: 0;
  padding: 10px;
  font-size: 12px !important;
  background-color: lightsteelblue;
}
.fade-enter-active {
  transition: all 0.5s ease;
}
.fade-leave-active {
  transition: all 0.5s ease; //cubic-bezier(1, 0.5, 0.8, 1);
}
.fade-enter {
  transform: translateX(15px);
  opacity: 0;
}
.fade-leave-to {
  transform: translateY(30px);
  opacity: 0;
}
.moveBtnBox {
  position: relative;
}
.moveBtn {
  position: absolute;
  top: 5px;
  right: -15px;
  z-index: 1000;
}
</style>
